<template>
    <!-- 地图点信息 -->
    <div class="allMarker">
        <AllinMarker :select-arr="selectArr" :select-menu-arr="selectMenu"></AllinMarker>
    </div>
</template>

<script>
    import AllinMarker from "../../../components/allinMarker/AllinMarker";

    import {
        outAndIn, statistics, irrigation
    } from '../../../axios/public/index'


    export default {
        name: "allMarker",
        components: {
            AllinMarker,
        },
        data() {
            return {
                selectArr: [
                    {
                        id: 1,
                        name: '停车场',
                        imgUrl: require('../../../assets/car-c.png')
                    }, {
                        id: 2,
                        name: '无人车',
                        imgUrl: require('../../../assets/car-b.png')
                    }, {
                        id: 3,
                        name: '摆渡车',
                        imgUrl: require('../../../assets/car-a.png')
                    }
                ],
                selectMenu: [
                    {
                        id: 1,
                        name: '全部点位',
                    },
                    {
                        id: 2,
                        name: '停车场',
                        imgUrl: require('../../../assets/car-c.png')
                    }, {
                        id: 3,
                        name: '无人车',
                        imgUrl: require('../../../assets/car-b.png')
                    }, {
                        id: 4,
                        name: '摆渡车',
                        imgUrl: require('../../../assets/car-a.png')
                    }
                ],// 选择菜单数组
                map: null,// 地图实例对象
                markerArrList: [],// 点位数组
                markerDataArr: null,//全部数据
                friedArr: null,// 出入闸机点位
                screen: [],// 智能屏幕点位
                irrigation: [],//灌溉点位
                broadcast: [],//广播点位
                stationDatas: {},
                parking: [],//停车场
                infoWindowOpen:null
            }
        },
        mounted() {

        },
        methods: {
            /**
             * 默认设置所有的点位
             */
            setAllMarker(params, map) {
                this.map = map
                this.markerDataArr = params
                console.log(this.markerDataArr)
                let markerArr = []
                this.markerDataArr.forEach(item => {
                    item.forEach(items => {
                        console.log(items.name)
                        if (items.names === "无人车") {
                            items.imgurl = this.selectArr[1].imgUrl
                            this.friedArr = item// 闸机点位
                        } else if (items.names === "摆渡车") {
                            items.imgurl = this.selectArr[2].imgUrl
                            this.screen = item// 智能屏幕点位
                        } else if (items.names === "停车场") {
                            items.imgurl = this.selectArr[0].imgUrl
                            this.parking = item
                        }
                        markerArr.push(items)
                    })
                })
                this.setMarkerToMap(markerArr)
                const _this = this
                map.on('click', function () {
                    console.log(_this.infoWindowOpen)
                    if ( _this.infoWindowOpen) {
                        _this.infoWindowOpen.close()
                    }
                })
            },
            /*
            * 点位选择
            * */
            selectMarkerItem(data) {
                if (this.markerArrList.length !== 0) {
                    this.map.remove(this.markerArrList)
                }
                if (data.name === "全部点位") {
                    let markerArr = []
                    this.markerDataArr.forEach(item => {
                        item.forEach(items => {
                            console.log(items.name)
                            if (items.names === "无人车") {
                                items.imgurl = this.selectArr[1].imgUrl
                                this.friedArr = item// 闸机点位
                            } else if (items.names === "摆渡车") {
                                items.imgurl = this.selectArr[2].imgUrl
                                this.screen = item// 智能屏幕点位
                            } else if (items.names === "停车场") {
                                items.imgurl = this.selectArr[0].imgUrl
                                this.parking = item
                            }
                            markerArr.push(items)
                        })
                    })
                    this.setMarkerToMap(markerArr)
                } else if (data.name === "无人车") {
                    this.setMarkerToMap(this.friedArr)
                } else if (data.name === "摆渡车") {
                    this.setMarkerToMap(this.screen)
                } else if (data.name === "停车场") {
                    this.setMarkerToMap(this.parking)
                }
            },
            /**
             * 手动选择全部点位
             */
            setMarkerToMap(data) {
                console.log(data, '处理后的数据')
                const _this = this
                data.forEach(item => {
                    console.log(item, '-------')
                    // const marker = new AMap.Marker({
                    //     icon: item.imgurl,  // Icon的图像
                    //     position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                    // });
                    const marker = new AMap.LabelMarker({
                        position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                        icon: {
                            image: item.imgurl,
                            size: [30, 30],
                        },
                        text: {
                            content: item.name,
                            direction: 'bottom',
                            style: {
                                fontSize: 15,
                                fillColor: '#fff',
                                padding: [3, 10],
                                backgroundColor: 'rgba(0, 22, 52, 0.49)',
                            }
                        }
                    });
                    _this.map.add(marker);
                    _this.markerArrList.push(marker)
                    marker.on('click', function () {
                        if (item.names === "无人车") {
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }

                            let html =
                                '<div class="markerWindow">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.name + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<div class="table">' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + '128' + '</span>个</p>' +
                                '<p>今日订单数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + '458' + '</span>Km</p>' +
                                '<p>今日里程数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + '8426' + '</span>元</p>' +
                                '<p>今日收入金额</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '</div>' +
                                '<p>名称：' + item.name + ' </p>' +
                                '<p>状态：<span style="color:' + item.online + ' ">' +  item.statusName  + '</span> </p>' +
                                '<p>实时位置：<span style="color:' + item.online + ' ">' +item.siteName + '</span> </p>' +
                                '<p>车辆负责人：<span>' +item.adminName + '</span> </p>' +
                                '<div class="sign">' +
                                '<div class="sign-title">' +
                                '<p><span>09:30</span><span>----</span><span>18:30</span></p>' +
                                '<p>15分钟一班</p>' +
                                '</div>' +
                                '<div class="sign-li">' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>园区主入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span style="color: #EEFD7B">雄安园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>秦皇岛园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>辛集口入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>唐山园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span style="color: #FFAD95">邯郸园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span  style="color: #EEFD7B">廊坊园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>承德园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>保定园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span  style="color: #EEFD7B">石家庄园入口</span>' +
                                '</li>' + '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>园区主入口</span>' +
                                '</li>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                            _this.openWindow(item, marker, html)
                        } else if (item.names === "摆渡车") {


                            console.log(item,'车')
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }

                            let html =
                                '<div class="markerWindow">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.name + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<div class="table">' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + '128' + '</span>个</p>' +
                                '<p>今日订单数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + '458' + '</span>Km</p>' +
                                '<p>今日里程数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + '8426' + '</span>元</p>' +
                                '<p>今日收入金额</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '</div>' +
                                '<p>名称：' + item.name + ' </p>' +
                                '<p>状态：<span style="color:' + item.online + ' ">' +  item.statusName  + '</span> </p>' +
                                '<p>实时位置：<span style="color:' + item.online + ' ">' +item.siteName + '</span> </p>' +
                                '<p>车辆负责人：<span>' +item.adminName + '</span> </p>' +
                                '<div class="sign">' +
                                '<div class="sign-title">' +
                                '<p><span>09:30</span><span>----</span><span>18:30</span></p>' +
                                '<p>15分钟一班</p>' +
                                '</div>' +
                                '<div class="sign-li">' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>园区主入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span style="color: #EEFD7B">雄安园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>秦皇岛园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>辛集口入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>唐山园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span style="color: #FFAD95">邯郸园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span  style="color: #EEFD7B">廊坊园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>承德园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>保定园入口</span>' +
                                '</li>' +
                                '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span  style="color: #EEFD7B">石家庄园入口</span>' +
                                '</li>' + '<li>' +
                                '<img src=" ' + require('../../../assets/traffic/icon1.png') + ' " alt="">' +
                                '<span>园区主入口</span>' +
                                '</li>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                            _this.openWindow(item, marker, html)
                        } else if (item.names === "停车场") {
                            let remaining = Number(item.busTotalNum) - Number(item.busUseNum)
                            let totalTurnoverRate = item.totalTurnoverRate ? item.totalTurnoverRate : 0
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }

                            let html =
                                '<div class="markerWindow">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.name + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<div class="table">' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + item.busUseNum + '</span>个</p>' +
                                '<p>实时占用车辆数</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + remaining + '</span>个</p>' +
                                '<p>剩余车位数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + item.busTotalNum + '</span>个</p>' +
                                '<p>总停车位数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + totalTurnoverRate + '</span></p>' +
                                '<p>停车场周转率</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '</div>' +
                                '<p>名称：' + item.name + ' </p>' +
                                '<p>状态：<span style="color:' + item.online + ' ">' +  item.statusName + '</span> </p>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                            _this.openWindow(item, marker, html)
                        }
                    })
                })
            },
            /*
            * 打开弹窗事件
            * */
            openWindow(item, marker, html) {
                const infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: html, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(-10, -30),
                    anchor: "top-left"
                });
                infoWindow.open(this.map, marker.getPosition());
                this.infoWindowOpen = infoWindow
                window.clearWindowInfo = function () {
                    infoWindow.close()
                }
            }
        },
        beforeDestroy() {
            this.map.remove(this.markerArrList)
            if (this.infoWindowOpen !== null) {
                this.infoWindowOpen.close()
            }
        }
    }
</script>

<style scoped lang="scss">

</style>